<template>
	<!-- 智能综采 -->
	<div class="flex-col h100">
		<my-box title="总览" class="top">
			<List :data="data" />
		</my-box>
		<my-box class="f1 h0 m-t-10" title="月度产量">
			<my-echarts :options="options" class="h100" />
		</my-box>
		<my-box class="f1 h0 m-t-10" :title="type == 0 ? '工作面回采进度' : '掘进进度'">
			<div class="f1 h0" v-for="item in collectionProgressData" :key="item.workingFaceId">
				<div style="color: #fff" class="m-t-10">{{ item.workingFaceName }}</div>
				<el-progress
					class="m-t-10"
					:percentage="50"
					:color="[
						{ color: '#4D88FE', percentage: 4 },
						{ color: '#4DB5FF', percentage: 100 }
					]"
				/>
				<div class="flex m-t-10 m-between">
					<div>
						<span style="color: rgba(255, 255, 255, 0.5)">当前已采:</span><span class="length">{{ item.finishLength }}米</span>
					</div>
					<div>
						<span style="color: rgba(255, 255, 255, 0.5)">设计长度:</span><span class="length">{{ item.designLength }}米</span>
					</div>
				</div>
			</div>
		</my-box>
	</div>
</template>

<script async setup>
import { yieldOverview, monthlyYield, collectionProgress, footageOverview, monthlyFootage, tunnellingProgress } from '@a/home'
import List from './component/List.vue'
// props
const props = defineProps({
	type: {
		type: Number,
		default: 0
	}
})

let options = computed(() => {
	return {
		backgroundColor: 'transparent',
		tooltip: {
			trigger: 'axis',
			backgroundColor: 'rgba(3, 15, 39, 0.8);',
			borderWidth: 2,
			borderColor: ' rgba(76, 107, 209, 0.5)',
			formatter: function (params) {
				let date = new Date()
				let html = `<div style="">${date.getFullYear()}年${params[0].axisValue}月总产量</div>
                <div><span style="color: #397BFD;font-size: 18px;font-weight: bold;">${
									params[0].value
								}</span><span style="color: #fff;margin-left:4px">万吨</span></div>`
				return html
			}
		},
		grid: {
			top: 28,
			bottom: 30,
			left: 30,
			right: 20
		},
		yAxis: {
			type: 'value',
			name: '万吨',
			splitNumber: 2,
			min: 'dataMin',
			max: 'dataMax',
			axisLabel: {
				color: '#fff', // x轴颜色
				fontSize: 14
			},
			nameTextStyle: {
				color: '#fff',
				fontSize: 12
			},
			splitLine: {
				show: true,
				lineStyle: { type: 'dashed', color: 'rgba(255, 255, 255,0.5)' }
			},
			axisTick: {
				show: false
			}
		},
		xAxis: {
			axisLine: {
				show: true
			},
			axisLabel: {
				color: '#fff', // x轴颜色
				fontSize: 14
			},
			data: monthlyYieldData.value.date
		},
		series: [
			{
				name: '月总产量',
				type: 'line',
				smooth: true,
				zlevel: 3,
				lineStyle: {
					color: '#397BFD'
				},
				itemStyle: { color: '#397BFD' },
				areaStyle: {
					color: {
						type: 'linear',
						x: 0,
						y: 0,
						x2: 0,
						y2: 1,
						colorStops: [
							{
								offset: 0,
								color: 'rgba(57,123,253,0.5)' // 0% 处的颜色
							},
							{
								offset: 1,
								color: 'rgba(57,123,253,0.00)' // 100% 处的颜色
							}
						],
						global: false // 缺省为 false
					}
				},
				data: monthlyYieldData.value.monthlyYield
			}
		]
	}
})

let data = computed(() => {
	if (props.type === 0) {
		return [
			{ name: '日产量', subname: 'Daily output', value: yieldOverviewData.value.dailyYield, unit: '万吨', icon: 'richanliang' },
			{ name: '月产量', subname: 'Monthly production', value: yieldOverviewData.value.monthlyYield, unit: '万吨', icon: 'yuechanliang' },
			{ name: '年产量', subname: 'Yearly production', value: yieldOverviewData.value.yearlyYield, unit: '万吨', icon: 'nianchanliang' },
			{ name: '采面人数', subname: 'Numbe r of people', value: yieldOverviewData.value.personCount, unit: '人', icon: 'caimianrenshu' }
		]
	} else {
		return [
			{ name: '日进尺', subname: 'Daily footage', value: 1.78, unit: '米', icon: 'rijinchi' },
			{ name: '月进尺', subname: 'Monthly footage', value: 23.78, unit: '米', icon: 'yuejinchi' },
			{ name: '年进尺', subname: 'Monthly footage', value: 12.78, unit: '米', icon: 'nianjinchi' },
			{ name: '掘进面人数', subname: 'Number of people', value: 11, unit: '人', icon: 'caimianrenshu' }
		]
	}
})

// 智能综采-产量总览
let yieldOverviewData = ref({
	dailyYield: 0,
	monthlyYield: 0,
	yearlyYield: 0,
	personCount: 0
})
// 智能综采-月度产量
let monthlyYieldData = ref({
	date: ['一月', '二月', '三月', '四月', '五月'],
	monthlyYield: [20.2, 30.1, 40.5, 50.5, 60.5]
})
// 智能综采-工作面回采进度
let collectionProgressData = ref([
	{
		workingFaceId: '00001',
		workingFaceName: '302工作面',
		designLength: 2002,
		finishLength: 665
	},
	{
		workingFaceId: '00002',
		workingFaceName: '404工作面',
		designLength: 2050,
		finishLength: 888
	}
])
if (props.type === 0) {
	yieldOverview().then((res) => {
		yieldOverviewData.value = res.data
	})
	monthlyYield().then((res) => {
		monthlyYieldData.value = res.data
	})
	collectionProgress().then((res) => {
		collectionProgressData.value = res.data
	})
} else {
	footageOverview().then((res) => {
		yieldOverviewData.value = res.data
	})
	monthlyFootage().then((res) => {
		monthlyYieldData.value.date = res.data.date
		monthlyYieldData.value.monthlyYield = res.data.monthlyFootage
	})
	tunnellingProgress().then((res) => {
		collectionProgressData.value = res.data
	})
}
</script>

<style lang="scss" scoped>
.length {
	color: #397bfd;
	font-size: 14px;
	font-weight: bold;
	margin-left: 4px;
}
:deep(.el-progress__text) {
	color: #fff;
}
</style>
